<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-14 flex v-align-c">
      <span></span>
      <i>全局设置</i>
    </h2>
    <h3 class="pancel-s-title">背景颜色</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box flex near-box">
        <div class="flex-item">
          <h4>背景</h4>
          <div class="mar-t-3 mar-b-5">
            <!-- <el-form-item>
              <div class="flex font-12 pad-r-30">
                <el-color-picker v-model="customPage.backgroundColor" class="color-sel"></el-color-picker>
              </div>
            </el-form-item> -->
            <el-form-item>
              <div class="flex font-12 pad-r-30 pad-l-4">                
                <el-color-picker 
                  v-model="customPage.backgroundColor"
                  @active-change="activecolorChange(customPage, 'backgroundColor', '#FFFFFF', $event)"
                  @change="colorChange(customPage, 'backgroundColor', '#FFFFFF', $event)"
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="customPage.backgroundColor"
                  @change="iptColorChange(customPage, 'backgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(customPage, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="flex-item">&nbsp;</div>
      </div>
      <div class="border-box">
        <div>
          <h4>背景图</h4>
          <div class="mar-t-3 mar-b-5">
            <div class="pancel-tips-bar">固定宽度750px，超过部分将按等比例自适应拉伸或缩小</div>
            <el-form-item class="uploads-bar">
              <div class="height-97 mar-r-10">
                <el-upload class="avatar-uploader pos-rel"
                action="/api/common/uploadFiles"
                accept="image/jpeg,image/gif,image/png,image/bmp"
                list-type="picture-card-xs"
                :before-upload="beforeUpload" name="files"                    
                :data="token" :show-file-list="false" :on-success="bcImgUploadSuccess">
                <div v-if="customPage.backgroundPicUrl" class="pos-rel">
                  <img v-if="customPage.backgroundPicUrl" :src="customPage.backgroundPicUrl" width="97px" height="97px">
                  <i class="el-icon-remove del-bgc" @click.stop="delBackgroundPic"></i>
                </div>
                  <div v-else class="default-p-pic xs-pic">
                    <div class="default-p-img"></div>
                    <div class="default-p-t">上传图片</div>
                  </div>
                </el-upload>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">分享设置</h3>
      </div>
      <div class="border-box">
        <h4>标题</h4>
        <div class="mar-t-1 mar-b--6">
          <el-form-item>
            <div>
              <el-input placeholder="请输入标题" class="mini-s-input" v-model="customPage.shareTitle"/>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box">
        <h4>图片</h4>
        <div class="mar-t-1 mar-b--6">
          <el-form-item class="uploads-bar">
            <div class="height-97 mar-r-10">
              <el-upload class="avatar-uploader"
              action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              list-type="picture-card-xs"
              :before-upload="beforeUpload" name="files"                    
              :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
                <img v-if="customPage.sharePicUrl" :src="customPage.sharePicUrl" width="97px" height="97px">
                <div v-else class="default-p-pic xs-pic">
                  <div class="default-p-img"></div>
                  <div class="default-p-t">上传图片</div>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: { },
    props: {
      customPage1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        customPage: {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          backgroundPicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        },
        fullScreenLoading: null,
        pictureType: '1',
        predefineColors: []
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.customPage = this.customPage1
      this.token = { accessToken: getToken() }
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
      // const that = this
      // this.$bus.$on('resetDetailsSearch', function(customPage) {
      //   that.customPage = customPage
      // })
    },
    methods: {
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file, item) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.customPage.sharePicUrl = res.data[0]
          this.$bus.$emit('resetDetailsPage', this.customPage)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      bcImgUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.customPage.backgroundPicUrl = res.data[0]
          this.$bus.$emit('resetDetailsPage', this.customPage)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      resetDetails() {
        this.customPage = {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          backgroundPicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj[key] = e
        } else {
          obj[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj[key] = defaultColor
      },
      delBackgroundPic() {
        this.customPage.backgroundPicUrl = ''
      }
    }
  }
</script>
<style lang="less" scoped>
.del-bgc{
  position: absolute;
  right: 0;
  top: 0;
}
</style>
